<template>
  <div>
    <div style="margin-bottom: 10px;">
      <el-input v-model="searchName" style="width: 200px;margin-right: 10px;" placeholder="请输入学生名称" clearable />
      <el-button type="primary" @click="list()">查询</el-button>
      <el-button type="success" @click="handleAdd">新增</el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column prop="empId" label="编号" width="60" />
      <el-table-column prop="stuName" label="姓名" width="80" />
      <el-table-column prop="entName" label="企业名称" width="100" />
      <el-table-column prop="jobTitle" label="岗位名称" width="100" />
      <el-table-column prop="empType" label="就业类型" />
      <el-table-column prop="empMethod" label="就业方式" />
      <el-table-column prop="empTag" label="就业标签" width="100" />
      <el-table-column prop="empSalary" label="就业薪资" width="100" />
      <el-table-column prop="empEndStart" label="入职时间" width="120" />
      <el-table-column prop="empEnd" label="就业结束时间" />
    </el-table>

    <el-dialog title="新增就业信息" v-model="dialogVisible" width="50%">
      <el-form :model="editForm" label-width="120px">
        <!--   <el-form-item label="就业ID">
          <el-input v-model="editForm.empId" disabled />
        </el-form-item> -->

        <el-form-item label="姓名">

          <el-select filterable v-model="editForm.stuId">
            <el-option v-for="item in stuNameList" :key="item.stuId" :label="item.stuName" :value="item.stuId" />
          </el-select>
          
        </el-form-item>

        <el-form-item label="企业名称">
          <el-select filterable v-model="editForm.entId">
            <el-option v-for="item in entNameList" :key="item.entId" :label="item.entName" :value="item.entId" />
          </el-select>
        </el-form-item>
        <el-form-item label="岗位名称">
          <el-select filterable v-model="editForm.jobId">
            <el-option v-for="item in jobNameList" :key="item.jobId" :label="item.jobTitle" :value="item.jobId" />
          </el-select>
        </el-form-item>
        <el-form-item label="就业类型">
          <el-select v-model="editForm.empType" filterable placeholder="请选择就业类型">
            <el-option label="实习" value="实习"></el-option>
            <el-option label="全职" value="全职"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="就业方式">
          <el-select v-model="editForm.empMethod" filterable placeholder="请选择就业方式">
            <el-option label="自主就业" value="自主就业"></el-option>
            <el-option label="推荐就业" value="推荐就业"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="就业标签">
          <el-select v-model="editForm.empTag" filterable placeholder="请选择就业标签">
            <el-option label="正常就业" value="正常就业"></el-option>
            <el-option label="超时就业" value="超时就业"></el-option>
            <el-option label="高薪就业" value="高薪就业"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="就业薪资">
          <el-input v-model="editForm.empSalary" />
        </el-form-item>
        <el-form-item label="入职时间">
          <el-date-picker v-model="editForm.empEndStart" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="就业结束时间">
          <el-date-picker v-model="editForm.empEnd" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"
            :disabled-date="disabledDate" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAddSubmit">保存</el-button>
        </span>
      </template>
    </el-dialog>


    <!-- 分页 -->
    <!-- layout:里面的值的顺序就是页面显示顺序 -->
    <div class="demo-pagination-block">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
        :size="size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElButton, ElTable, ElTableColumn, ElMessage } from 'element-plus';
import { employmentListApi, employmentAddApi, employmentAllListApi } from '@/api/emp-api';



//分页参数
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(10)
const size = ref('default')

// 搜索条件
const searchName = ref('');

// 表格数据
const tableData = ref([]);

const entOptions = [
  { id: 1, name: '企业1' },
  { id: 2, name: '企业2' },
]

const stuNameList = ref<any>([]);
const entNameList = ref<any>([]);
const jobNameList = ref<any>([]);

// 查询列表
const list = async () => {
  // 分页模糊查询参数
  const response = await employmentListApi({ page: currentPage.value, size: pageSize.value, name: searchName.value });
  console.log('查询列表', response);
  if (response.code === 200) {
    tableData.value = response.data.list;
    total.value = response.data.total;
  } else {
    ElMessage.error('查询失败');
  }
};
const dialogVisible = ref(false);
const editForm = ref({
  empId: null,
  stuId: null,
  stuName: '',
  entId: null,
  entName: '',
  jobId: null,
  jobTitle: '',
  empType: '',
  empMethod: '',
  empTag: '',
  empSalary: null,
  empEndStart: '',
  empEnd: '',
  empCreated: '',
},);

const handleAdd = () => {
  dialogVisible.value = true;
};

// 限制结束时间不能小于入职时间
const disabledDate = (time: any) => {
  if (editForm.value.empEndStart) {
    return time.getTime() < new Date(editForm.value.empEndStart).getTime()
  }
  return false
}


// 处理每页显示条数变化的事件
const handleSizeChange = (newPageSize: number) => {
  pageSize.value = newPageSize;
  list();
};

// 处理当前页码变化的事件
const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage;
  list();
};

// 新增
const handleAddSubmit = async () => {
  const response = await employmentAddApi(editForm.value);
  console.log('新增', response);
  if (response.code === 200) {
    ElMessage.success('新增成功');
    dialogVisible.value = false;
    list();
  } else {
    ElMessage.error('新增失败');
  }
};

// 查询所有列表
const fun = async () => {
  const response = await employmentAllListApi();
  console.log('查询所有列表', response);
  if (response.code === 200) {
    tableData.value = response.data.pageVo.list;
    total.value = response.data.pageVo.total;

    stuNameList.value = [];
    entNameList.value = [];
    jobNameList.value = [];

    stuNameList.value = response.data.list1.map((item: any) => {
      return { stuId: item.stuId, stuName: item.stuName };
    });
    entNameList.value = response.data.list2.map((item: any) => {
      return { entId: item.entId, entName: item.entName };
    });
    jobNameList.value = response.data.list3.map((item: any) => {
      return { jobId: item.jobId, jobTitle: item.jobTitle };
    });

  } else {
    ElMessage.error('查询失败');
  }
};

// 页面加载完后，加载默认数据
onMounted(() => {
  fun();
});

// 表格行样式
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  row
  if (rowIndex % 2 === 0) {
    return 'success-row'
  }
  return ''
}

</script>
  
<style>
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
